<template>
  <div>
    <!-- 钩子函数 
      这个函数不是我们调用的 vue内部实现，在关键的节点到的时候自己调用
     -->

    <!-- 
      钩子 三个
      bind 只会调用一次 初始化时调用
      inserted 插入dom的时候会调用
      update 数据更新的时候调用

      v-show
        一进页面 
         bind
         inserted 
        点击切换
         v-show因为只是控制css 元素一直在页面，切换的时候会触发update 
        修改颜色
          触发update
          
      v-if
        一进页面
          bind
          inserted
          
        点击切换
           v-if因为会销毁或者创建元素 bind和inserted在创建的又会执行
        修改颜色  
           如果元素还在 update就会触发
           元素不在 update不会触发

     -->
    <h1>自定义指令-钩子复习</h1>
    <p v-color="color" v-show="show">测试文字</p>
    <button @click="handleChangeColor">改颜色</button>
    <button @click="show = !show">切换</button>
  </div>
</template>

<script>
import { randomColor } from "../../src/utils/index";
export default {
  data() {
    return {
      color: "red",
      show: true,
    };
  },
  methods: {
    handleChangeColor() {
      this.color = randomColor();
    },
  },
  directives: {
    color: {
      inserted(el, binding) {
        console.log("inserted", el, binding);
        el.style.color = binding.value;
      },
      update(el, binding) {
        console.log("update", el, binding);
        el.style.color = binding.value;
      },
      bind(el, binding) {
        console.log("bind", el, binding);
        el.style.color = binding.value;
      },
    },
  },
};
</script>

<style>
</style>
